<template>
  <div class="form-container">
    <div class="top">
      <el-form size="mini" ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item prop="level" label="成交意向">
          <div class="level-list">
            <div class="item" :class="{ active: form.level === item.id }" v-for="item in levelList" :key="item.id" @click="form.level = item.id">
              <p class="title">{{ item.name }}</p>
              <p class="desc">{{ item.desc }}</p>
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="desc" label="备注">
          <el-input v-model="form.desc" placeholder="请填写回访内容及结论" type="textarea" :rows="5" />
        </el-form-item>
        <el-form-item prop="feedback" label="客户意见反馈">
          <el-input v-model="form.feedback" placeholder="请填写客户意见反馈" type="textarea" :rows="5" />
        </el-form-item>
        <el-form-item prop="alarm_time" label="回访提醒">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="form.alarm_time" type="datetime" placeholder="选择日期时间"> </el-date-picker>
          <div class="time-list">
            <div class="item" :class="{ active: timeActive === item.id }" @click="timeActive === item.id ? (timeActive = '') : (timeActive = item.id)" v-for="item in timeList" :key="item.id">{{ item.name }}</div>
          </div>
        </el-form-item>
        <el-form-item prop="is_deal" label="是否成交">
          <el-row>
            <el-col :span="12"> <el-checkbox v-model="form.is_deal">已成交</el-checkbox>（勾选提交后将向该客户收取服务费） </el-col>
            <el-col :span="12">
              <div class="box">
                成交金额：
                <el-input v-model="form.money" />
                元
              </div>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom">
      <div class="line">
        <el-button size="mini" @click="handleEdit">修改回收偏好</el-button>
        <el-button size="mini" type="primary" @click="onSubmit">提交</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { apiManContactAdd } from '@/api/assetsDisposal'

export default {
  props: {
    id: String,
    userId: String,
  },
  data() {
    return {
      levelList: [
        { id: 'A', name: 'A级', desc: '直接成交' },
        { id: 'B', name: 'B级', desc: '希望成交' },
        { id: 'C', name: 'C级', desc: '没有意向' },
      ],
      timeActive: '',
      timeList: [
        { id: 1, name: '1天' },
        { id: 3, name: '3天' },
        { id: 7, name: '7天' },
        { id: 10, name: '10天' },
        { id: 30, name: '30天' },
      ],
      form: {
        level: 'B',
        is_deal: false,
        desc: '',
        feedback: '',
        alarm_time: '',
        money: '',
      },
      rules: {},
    }
  },
  watch: {},
  computed: {},
  mounted() {},
  methods: {
    // 提交
    onSubmit() {
      console.log(this.form)
      this.$refs.form.validate((flag) => {
        if (flag) {
          const form = {
            id: this.id,
            level: this.form.level,
            desc: this.form.desc,
            feedback: this.form.feedback,
            alarm_time: this.form.alarm_time,
            is_deal: this.form.is_deal ? 1 : 0,
            money: this.form.money,
          }
          if (this.timeActive) {
            form.alarm_time = this.getTime(this.timeActive)
          }
          const formData = new FormData()
          for (let key in form) {
            formData.set(key, form[key])
          }
          apiManContactAdd(formData).then((res) => {
            if (res.code === 200) {
              this.$emit('confirm')
            }
          })
        }
      })
    },
    // 天数转换日期
    getTime(num) {
      const today = new Date()
      const result = new Date()
      result.setDate(today.getDate() + num)
      const m = result.getMonth() + 1
      const d = result.getDate()
      const hh = result.getHours()
      const mm = result.getMinutes()
      const ss = result.getSeconds()
      return `${result.getFullYear()}-${m < 10 ? '0' + m : m}-${d < 10 ? '0' + d : d} ${hh < 10 ? '0' + hh : hh}:${mm < 10 ? '0' + mm : mm}:${ss < 10 ? '0' + ss : ss}`
    },
    handleEdit() {
      this.$emit('edit', this.userId)
    },
  },
}
</script>
<style lang="scss" scoped>
.form-container {
  padding: 0 24px;
  .top {
    min-height: 300px;
  }
  .bottom {
    .line {
      display: flex;
      justify-content: flex-end;
    }
  }
  .el-input {
    width: 200px !important;
    margin-right: 10px !important;
    margin-bottom: 2px;
  }
  .line {
    display: inline-block;
    margin-left: 10px;
  }
  .box {
    margin-left: 30px;
    .el-input {
      width: 50% !important;
    }
  }
  .level-list {
    display: flex;
    .item {
      margin-right: 20px;
      width: 100px;
      height: 50px;
      background: #ededed;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      line-height: 1;
      color: #000000;
      cursor: pointer;
      &.active {
        background: #409eff;
        color: #ffffff;
      }
      .title {
        margin: 0;
        margin-bottom: 10px;
      }
      .desc {
        margin: 0;
        font-size: 12px;
      }
    }
  }
  .time-list {
    display: inline-block;
    .item {
      display: inline-block;
      margin-right: 5px;
      width: 70px;
      height: 28px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      line-height: 28px;
      text-align: center;
      color: #000000;
      font-size: 12px;
      cursor: pointer;
      &.active {
        border-color: #409eff;
        color: #409eff;
      }
    }
  }
}
</style>

<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}
</style>
